<template>
    <div class="address-list-wrap">
        <CommonHeader teleport=".header" title="收货地址" left-arrow @click-left="$router.back()"></CommonHeader>

        <template v-if="loading">
            <van-loading size="24px">加载中...</van-loading>
        </template>
        <template v-else>
            <van-address-list v-if="list" v-model="chosenAddressId" :list="list" :disabled-list="disabledList"
                disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
            <div v-else>
                <van-empty description="还未添加地址">
                    <RouterLink to="/address/add">
                        <van-button type="primary" class="bottom-button">新增地址</van-button>
                    </RouterLink>
                </van-empty>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import CommonHeader from "@/components/CommonHeader.vue";
import { RouterLink } from "vue-router";

import { ref, onMounted } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";

import { getAddressListAPI } from "@/api/address";
import { useUserid } from "@/hooks/useUserid";
import { showSuccessToast, showFailToast } from "vant";

const router = useRouter();

const { userid } = useUserid(); // ref对象

const chosenAddressId = ref();
const loading = ref<boolean>(true);
const originList = ref<any>(null);

const list = ref<any>([
    {
        id: "1",
        name: "张三",
        tel: "13000000000",
        address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        isDefault: true,
    },
    {
        id: "2",
        name: "李四",
        tel: "1310000000",
        address: "浙江省杭州市拱墅区莫干山路 50 号",
    },
]);


const disabledList = [
    {
        id: "3",
        name: "王五",
        tel: "1320000000",
        address: "浙江省杭州市滨江区江南大道 15 号",
    },
];

const onAdd = () => {
    router.push("/address/add");
};
const onEdit = (item: any, index: number) => {
    console.log("点击编辑",item,index);
    let addressid = item.id;

    let editAddress = originList.value.find((v:any)=> v.addressid == addressid);

    // 在地址栏传入对象数据  (对象数据 1. 转json字符串  2. 字符串编码)
    router.push({path:"/address/edit",query:{
        // address:JSON.stringify(editAddress), //传入json字符串
        address:encodeURIComponent(JSON.stringify(editAddress)), //传入编码后的json字符串
    }});
};

const getAddressList = async () => {
    try {
        let result = await getAddressListAPI({
            userid: userid.value,
        });
        console.log("地址获取成功", result.data);
        originList.value = result.data;

        let arr = result.data.map((v: any) => {
            return {
                id: v.addressid,
                name: v.name,
                tel: v.tel,
                address: `${v.province}${v.city}${v.county}${v.addressDetail}`,
                isDefault: v.isDefault,
            };
        });

        let DefaultAddress = result.data.find((v: any) => v.isDefault);
        if (DefaultAddress) {
            chosenAddressId.value = DefaultAddress.addressid;
        } else {
            chosenAddressId.value = result.data[0].addressid;
        }

        list.value = arr;
        // list.value = null;

        console.log(333, chosenAddressId.value);
        console.log(444, arr);
    } catch (err: any) {
        showFailToast(err.message);
    }
};

onMounted(async () => {
    await getAddressList();
    loading.value = false;
});
</script>

<style scoped></style>
